﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Cs2102BookingSystem.Models.BOOKING>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	EditBooking
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  
  <script type="text/javascript">

      var startDate = '<%= Model.STARTDATE.ToString() %>';
      var dateParts = startDate.match(/(\d+)/g);
      var realDate = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      var endDate = '<%= Model.ENDDATE.ToString() %>';
      dateParts = endDate.match(/(\d+)/g);
      var realDate1 = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      // months are 0-based!

  </script>
  <script type="text/javascript">

      $(function () {
          $("#datepicker").datepicker();
          $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy");
          $("#datepicker").datepicker("setDate", realDate);
          $("#datepicker1").datepicker();
          $("#datepicker1").datepicker("option", "dateFormat", "dd-mm-yy");
          $("#datepicker1").datepicker("setDate", realDate1);
      });
  </script>
    <form id="form1" runat="server">

    <h2>Reservation of Hotel Room</h2>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>
        <table>
        </table>
        <fieldset>
            <legend>Hotel Booking Information</legend>
             <div class="editor-label">
                <Table cellpadding="10px" style="border-spacing:10px">
                <tr>
                    <td>Transaction ID</td>
                    <td>                
                    <%: Html.HiddenFor(model => model.BOOKINGID, String.Format("{0:F}", Model.BOOKINGID)) %>
                    <%: Html.TextBox("BookingID", Model.BOOKINGID,new Dictionary<string, object> { { "readonly", "readonly" }, {"style","width:50px"}})%>
                    </td>
                </tr>
                <tr>
                    <td>Hotel Name:</td>
                    <td>                
                    <%: Html.HiddenFor(model => model.H_NAME)%>
                    <%: Html.TextBox("HotelName", Model.H_NAME, new Dictionary<string, object> { { "readonly", "readonly" }, { "style", "width:300px" } })%>
                    </td>
                    <td colspan="2" rowspan="2"><% Html.RenderAction("HotelImage", "Booking", new { HOTEL_NAME = Model.H_NAME, BRANCHNAME = Model.H_BRANCHNAME, COUNTRY = Model.H_COUNTRY}); %></td>

                </tr>
                <tr>
                    <td>Country Visiting:</td>
                    <td>
                    <%: Html.HiddenFor(model => model.H_COUNTRY)%>
                    <%: Html.TextBox("Country", Model.H_COUNTRY, new Dictionary<string, object> { { "readonly", "readonly" }, { "style", "width:300px" } })%>
                    </td>
                </tr>
                <tr>
                    <td>Hotel Branch:</td>
                    <td>
                    <%: Html.HiddenFor(model => model.H_BRANCHNAME)%>
                    <%: Html.TextBox("Country", Model.H_BRANCHNAME, new Dictionary<string, object> { { "readonly", "readonly" }, { "style", "width:300px" } })%>
                    </td>
                </tr>
                <tr>
                    <td>Room Type:</td>
                    <td>
                    <%: Html.DropDownListFor(model => model.R_ROOMTYPE, (SelectList)ViewData["room"],"-- Select One --", new Dictionary<string, object> { { "id", "R_ROOMTYPE" }, { "runat", "server" }, { "AutoPostBack", "true" }, { "onchange", "this.form.submit()" } })%>
                    </td>
                    <td>
                    <%: Html.ValidationMessageFor(model => model.R_ROOMTYPE) %>
                    </td>
                </tr>
                <tr>
                    <td>Bed Type:</td>
                    <td>
                     <%: Html.DropDownListFor(model => model.R_BEDTYPE, (SelectList)ViewData["bed"], "-- Select One --", new Dictionary<string, object> { { "id", "R_BEDTYPE" }, { "runat", "server" }, { "AutoPostBack", "true" }, { "onchange", "this.form.submit()" } })%>
                    </td>
                    <td colspan=2>
                    <%: Html.ValidationMessageFor(model => model.R_BEDTYPE) %>
                    </td>
                </tr>
                <tr>
                    <td>Number of Room:</td>
                    <td>
                    <%: Html.TextBoxFor(model => model.NOOFROOM,
                                        new Dictionary<string, object> { { "id", "NOOFROOM" }, 
                                                                         { "onchange", "javascript: calculateTotalPrice()" } }) %>
                    </td>
                    <td>
                    <%: Html.ValidationMessageFor(model => model.NOOFROOM) %>
                    </td>
                </tr>
                <tr>
                    <td>Price per Room</td>
                    <td>
                    <span class="currencyinput">
                        $<input id="text1" name="PRICEPERROOM" type="text" value=<%: Model.PRICEPERROOM %> readonly="readonly" /> 
                    </span>
                    </td>
                    <td>Total Price:</td>
                    <td>
                    <span class="currencyinput">
                        $<a id="TOTALPRICE"></a>
                    </span>
                    </td>
                </tr>
                <tr>
                    <td>Staying From:</td>
                    <td><input type="text" name="STARTDATE" id="datepicker" onchange="calculateTotalPrice()"  />

                    </td>
                    <td><%: Html.ValidationMessageFor(model => model.STARTDATE) %></td>
                </tr>
                <tr>
                    <td>Leaving On:</td>
                    <td><input type="text" name="ENDDATE" id="datepicker1" onchange="calculateTotalPrice()"/>
                    </td>
                    <td><%: Html.ValidationMessageFor(model => model.ENDDATE) %></td>
                </tr>
                </Table>
            </div>
            
            <p>
                <input type="submit" name="submit1" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

    </form>

   <script type="text/javascript">
       window.onload = calculateTotalPrice;
       function calculateTotalPrice() {
           var price_per = parseInt(text1.value, 10);
           var NOOFROOM = document.getElementById("NOOFROOM");
           var number = parseInt(NOOFROOM.value);
           var startDateStr = document.getElementById("datepicker").value;
           var endDateStr = document.getElementById("datepicker1").value;
           var parts = startDateStr.split("-");
           var startDate = new Date(parts[2], parts[1] - 1, parts[0]);
           parts = endDateStr.split("-");
           var endDate = new Date(parts[2], parts[1] - 1, parts[0]);

           var millisecondsPerDay = 1000 * 60 * 60 * 24;

           var millisBetween = endDate.getTime() - startDate.getTime();
           var days = millisBetween / millisecondsPerDay;
           days = Math.floor(days);

           var total = number * price_per * days;
           TOTALPRICE.innerHTML = total.toString(10);
       }
  </script>
</asp:Content>

